<template>
	<view class="echart">
		<div ref="bar5"></div>
	</view>
</template>

<script>
export default {
  props:['chartData'],
  data() {
    return {}
  },
  mounted() {
    this.getChartData();
  },
  methods: {
    getChartData() {
      const dataList = this.chartData;
      const xData = this.chartData.map(item => item.label);
      const yData1 = this.chartData.map(item => item.value);
      const maxArray = new Array(dataList.map(item => item.value).length).fill(Math.max(...(dataList.map(item => item.value))));
      let attackSourcesColor = [
        new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: 'rgba(235, 202, 19, 1)' },
          { offset: 1, color: 'rgba(255, 229, 105, 1)' },
        ]),
        new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: 'rgba(117, 133, 166, 1)' },
          { offset: 1, color: 'rgba(174, 189, 212, 1)' },
        ]),
        new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: 'rgba(221, 159, 26, 1)' },
          { offset: 1, color: 'rgba(255, 184, 91, 1)' },
        ]),
        new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: 'rgba(72, 170, 246, 1)' },
          { offset: 1, color: 'rgba(109, 204, 253, 1)' },
        ]),
        new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: 'rgba(72, 170, 246, 1)' },
          { offset: 1, color: 'rgba(109, 204, 253, 1)' },
        ]),
      ];
      let backgroundColor = [
        'rgba(178, 171, 112, 1)',
        'rgba(47, 99, 231, 1)',
        'rgba(169, 159, 129, 1)',
        'rgba(133, 212, 253, 1)',
        'rgba(133, 212, 253, 1)'
      ]
      let option = {
        grid: {
          top: '10%',
          left: '-18%',
          right: '-15%',
          bottom: '0%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          formatter(params) {
            for (var i = 0; i < params.length; i++) {
              return params[i].name + '：' + params[i].data + '个';
            }
          },
        },
        xAxis: {
          type: 'value',
          axisLabel: { show: false, },
          axisLine: {  show: false, },
          axisTick: { show: false, },
          splitLine: { show: false, },
        },
        yAxis: [
          {
            type: 'category',
            data: xData,
            inverse: true,
            splitNumber: 6  ,
            axisLine: { show: false, },
            axisTick: { show: false, },
            splitLine: { show: false, },
            axisLabel: {
              margin: 10, //刻度标签与轴线之间的距离
              padding: [0, 0, 20, 0],
              formatter: function (value, index) {
                const idx = index + 1;
                if (idx < 4) {
                  return `{img${idx}|${idx}}`;
                } else {
                  return `{img|${idx}}`;
                }
              },
              rich: {
                img: {
                  width: 28,
                  height: 30,
                  color: '#fff',
                  align: 'center',
                  fontSize: 18,
                  fontStyle: 'italic',
                  fontFamily: 'Source Han Sans CN',
                  padding: [0, 5, 0, 0],
                  backgroundColor: {
                    image: '../../assets/echarts/rank-icon4.png',
                    repeat: 'no-repeat'
                  },
                },
                img1: {
                  width: 28,
                  height: 30,
                  color: '#fff',
                  align: 'center',
                  fontSize: 18,
                  fontStyle: 'italic',
                  fontFamily: 'Source Han Sans CN',
                  padding: [0, 5, 0, 0],
                  backgroundColor: {
                    image: '../../assets/echarts/rank-icon1.png',
                    repeat: 'no-repeat'
                  },
                },
                img2: {
                  width: 28,
                  height: 30,
                  color: '#fff',
                  align: 'center',
                  fontSize: 18,
                  fontStyle: 'italic',
                  fontFamily: 'Source Han Sans CN',
                  padding: [0, 5, 0, 0],
                  backgroundColor: {
                    image: '../../assets/echarts/rank-icon2.png',
                    repeat: 'no-repeat'
                  },
                },
                img3: {
                  width: 28,
                  height: 30,
                  color: '#fff',
                  align: 'center',
                  fontSize: 18,
                  fontStyle: 'italic',
                  fontFamily: 'Source Han Sans CN',
                  padding: [0, 5, 0, 0],
                  backgroundColor: {
                    image: '../../assets/echarts/rank-icon3.png',
                    repeat: 'no-repeat'
                  },
                },
              },
            },
          },
          {//左侧上方的文字
            type: 'category',
            data: xData,
            inverse: true,
            position: 'left',
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false, },
            axisLabel: {
              position: 'insideRight',//在上方显示
              align: 'top',
              verticalAlign: "bottom",
              fontSize: 12,
              padding: [0, 0, 10, 10],
              color: '#666666',
            },
          },
          {//右侧的数字
            type: 'category',
            data: yData1,
            inverse: true,
            position: 'right',
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: {
              // align: 'right',
              padding: [0, 0, 30, -60],
              formatter: function (value, index) {
                return `{a|${dataList[index].value}}{b|个}`;
              },
              rich: {
                a: {
                  fontSize: 18,
                  color: '#333333',
                },
                b: {
                  fontSize: 14,
                  color: '#666666',
                  padding: [0, 0, 0, 5],
                }
              },
            },
          },
        ],
        series: [
          {
            z: 3,
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            barWidth: '25%',
            data: yData1,
            itemStyle: {
              normal: {
                barBorderRadius: [30, 30, 30, 30],
                color: function (params) {
                  return params.dataIndex > 3 ? attackSourcesColor[params.dataIndex] : attackSourcesColor[params.dataIndex]
                },
              }
            }
          },
          {//背景
            z: 1,
            type: 'bar',
            barWidth: '25%',
            barGap: '-100%',
            data: maxArray,
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.dataIndex > 3 ? backgroundColor[params.dataIndex] : backgroundColor[params.dataIndex]
                },
                opacity: 0.3,
                barBorderRadius: 30
              }
            }
          }
        ],
      }
      this.$refs.bar5.init(this.$echarts, chart => {
        chart.setOption(option);
      });
    }
  }
}
</script>

<style scoped>
.echart{
  width: 100%;
  height: 100%;
}
</style>
